<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> aaaa</title>
    <script src="g6.min.js"></script>
    <style>
        .main {
            width: 100%;
            display: flex;
            height: 525px;
            position: absolute;
            z-index: 1;
            top: 0;
            flex-wrap: wrap;
            gap: 60px;
        }

        .main-row {
            display: flex;
            width: 100%;
            gap: 10px;
            height: 90px;
        }

        .main-row div:first-child {
            background: #abcdef;
            width: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .main-row div:last-child {
            background: #F4F9F9;
            flex-grow: 1;
            border: 1px solid #eee;
        }

        .main-row-platform {
            height: 550px;
        }
    </style>
</head>
<body>
<div id="container" style="width: 100%; height: 1000px; z-index: 2"></div>
<div class="main">
    <div class="main-row">
        <div>服务层</div>
        <div></div>
    </div>
    <div class="main-row">
        <div>实例层</div>
        <div></div>
    </div>
    <div class="main-row main-row-platform">
        <div>平台层</div>
        <div></div>
    </div>
    <div class="main-row">
        <div>设备层</div>
        <div></div>
    </div>

</div>
<script>
    const newData = {
        nodes: [
            {id: '00', label: '00'},
            {id: '11', label: '11'},
            {id: '22', label: '22'},
            {id: '33', label: '33'},
            {id: '44', label: '44'},
            {id: '55', label: '55'},
            {id: '661', label: '661'},
            {id: '662', label: '662'},
            {id: '66', label: '66'},
            {id: '77', label: '77'},
            {id: '88', label: '88'},
            {id: '99', label: '99'},
            {id: '100', label: '100'},
            {id: '111', label: '111'},
        ],
        edges: [
            {id: 'newId1', source: '00', target: '11'},
            {id: 'newId2', source: '00', target: '22'},
            {id: 'newId3', source: '00', target: '33'},
            {id: 'newId4', source: '00', target: '44'},
            {id: 'newId5', source: '00', target: '55'},
            {id: 'newId6', source: '11', target: '66'},
            {id: 'newId7', source: '22', target: '66'},
            {id: 'newId8', source: '33', target: '66'},
            {id: 'newId9', source: '44', target: '661'},
            {id: 'newId10', source: '55', target: '662'},
            {id: 'newId11', source: '661', target: '77'},
            {id: 'newId111', source: '66', target: '77'},
            {id: 'newId121', source: '662', target: '88'},
            {id: 'newId12', source: '66', target: '88'},
            {id: 'newId14', source: '77', target: '99'},
            {id: 'newId15', source: '88', target: '99'},
            {id: 'newId13', source: '99', target: '100'},
            {id: 'newId16', source: '100', target: '111'},
        ],
    };
    const oldData = {
        "nodes": [
            {
                "id": "0",
                label: 'I6000'
            },
            {
                "id": "1",
                label: '公共支撑服务'
            },
            {
                "id": "2",
                label: '平台主框架'
            },
            {
                "id": "3",
                label: '组件前台服务'
            },
            {
                "id": "4",
                label: '组件后台服务'
            },
            {
                "id": "5",
                label: 'K8s部署'
            },
            {
                "id": "6",
                label: 'ECS'
            },
            {
                "id": "7",
                label: 'ECS'
            },
            {
                "id": "8",
                label: 'ECS'
            },
            {
                "id": "9",
                label: '阿里云平台'
            },
            {
                "id": "10",
                label: '物理机1'
            },
            {
                "id": "11",
                label: '物理机2'
            }
        ],
        "edges": [
            {
                "id": "edge-102",
                "source": "0",
                "target": "1"
            },
            {
                "id": "edge-161",
                "source": "1",
                "target": "2"
            },
            {
                "id": "edge-237",
                "source": "1",
                "target": "3"
            },
            {
                "id": "edge-253",
                "source": "1",
                "target": "4"
            },
            {
                "id": "edge-133",
                "source": "2",
                "target": "5"
            },
            {
                "id": "edge-320",
                "source": "3",
                "target": "5"
            },
            {
                "id": "edge-355",
                "source": "4",
                "target": "5"
            },
            {
                "id": "edge-823",
                "source": "5",
                "target": "6"
            },
            {
                "id": "edge-665",
                "source": "5",
                "target": "7"
            },
            {
                "id": "edge-6651",
                "source": "5",
                "target": "8"
            },
            {
                "id": "edge-884",
                "source": "8",
                "target": "9"
            },
            {
                "id": "edge-536",
                "source": "9",
                "target": "10"
            },
            {
                "id": "edge-401",
                "source": "9",
                "target": "11"
            }
        ],
        /* "combos": [
             {
                 "id": "A",
                 "style": {
                     "type": "rect",
                     "width":"500px"
                 }
             },
         ]*/
    };
    const {Graph} = G6;
    let graph = new Graph({
        container: 'container',
        autoFit: 'center',
        data: oldData,
        animation: false,
        node: {
            type: 'circle',
            style: {
                size: [80, 50],
                radius: 8,
                labelText: (d) => d.label.length > 3 && d.label !== 'I6000' ?
`
${d.label.substring(0, 3)}
${d.label.substring(3)}
` : d.label,
                fill: function (node) {
                    let color = '';
                    switch (node.id) {
                        case '0':
                            color = '#79ffa8';
                            break;
                        case '1':
                            color = '#d32f2f'
                            break;
                        default:
                            color = '#eee';
                            break;
                    }
                    return color;
                },
                labelPlacement: 'center',
                labelBackground: false,
                ports: [{placement: 'top'}, {placement: 'bottom'}],
            },
            state: {
                highlight: {
                    lineWidth: 3,
                    stroke: "orange"
                }
            },
            palette: {
                field: (d) => d.combo,
            },
        },
        edge: {
            type: 'cubic-vertical',
            style: {
                endArrow: true,
                stroke: function (edge) {
                    return edge.id === 'edge-253' ? '#bf4dec' : '#928f8f';
                }
            },
        },
        /*  combo: {
              type: 'rect',
              style: {
                  radius: 8,
                  labelText: (d) => d.id,
              },
          },*/
        layout: {
            type: 'antv-dagre',
            ranksep: 50,
            nodesep: 5,
            sortByCombo: true,
            enable: false
        },
        // behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
        behaviors: ['hover-activate '],
    });

    graph.render();
    graph.on('node:click', (evt) => {
        console.log('evt:', evt)
        if (evt.target && evt.target.type === 'node') {
            // 获取节点的数据模型
            const {target} = evt;
            const nodeData = graph.getNodeData(target.id);
            console.log('点击的节点id：', nodeData.id);
            console.log('点击的节点label：', nodeData.label);

            console.log(G6.version)
            // 更新图表数据
            graph.setData(newData); // 使用 changeData 方法更新数据
            graph.render();
            addListener();
        }
    });

    function addListener() {
        graph.on('node:click', (evt) => {
            console.log('evt:', evt)
            if (evt.target && evt.target.type === 'node') {
                // 获取节点的数据模型
                const {target} = evt;
                const nodeData = graph.getNodeData(target.id);
                console.log('点击的节点id：', nodeData.id);
                console.log('点击的节点label：', nodeData.label);

                // 更新图表数据

                if (nodeData.id.length === 1) {
                    graph.setData(newData);
                } else {
                    graph.setData(oldData);
                }
                graph.render();
                addListener();
            }
        });
        // 监听边的鼠标进入事件
        graph.on('node:pointerover', (evt) => {
            const {target} = evt;
            graph.setElementState(target.id, 'highlight');
        });
        // 监听边的鼠标移出事件
        graph.on('node:pointerleave', (evt) => {
            const {target} = evt;
            graph.setElementState(target.id, '');
        });
    }

    addListener();
</script>
</body>
</html>
